<template>
  <div>
    <a-card :bordered="false" style="padding:0 10px 10px 0;">
      <div style="margin-bottom: 20px" class="dib">
        <h2 style="margin-left: 8px">进度-概览</h2>
      </div>

      <a-row type="flex" justify="space-around" align="middle" v-model="pnodes">
        <a-col :span="5" class="antLeft">
          <div>
            <a-steps :current="tindex" labelPlacement="vertical" style="margin-bottom: 35px">
              <a-step
                :title="pnodes[0].status|statusfilter"
                :description="pnodes[0].name"
                @click="clickurl(pnodes[0].todoUrl)"
                @mouseover="hovertips(pnodes[0].ptips,0,pnodes.length)"
                @mouseout="hovertipsOut()"
              />
              <a-step title description style="visibility: hidden;" />
            </a-steps>

            <a-steps :current="bindex" labelPlacement="vertical">
              <a-step
                :title="pnodes[1].status|statusfilter"
                :description="pnodes[1].name"
                @click="clickurl(pnodes[1].todoUrl)"
                @mouseover="hovertips(pnodes[1].ptips,1,pnodes.length)"
                @mouseout="hovertipsOut()"
              />
              <a-step title description style="visibility: hidden;" />
            </a-steps>
            <div class="borderVer"></div>
          </div>
        </a-col>
        <a-col :span="19" class="col18">
          <div>
            <a-steps
              :current="currentindex"
              direction="horizontal"
              labelPlacement="vertical"
              v-model="pnodes"
            >
              <a-step title="description" style="display:none" />
              <a-step
                :title="item.status|statusfilter"
                :description="item.name"
                @click="clickurl(pnodes[index+2].todoUrl)"
                @mouseover="hovertips(pnodes[index+2].ptips,index+2,pnodes.length)"
                @mouseout="hovertipsOut()"
                v-for="(item, index) in pnodes.slice(2)"
                :key="index+2"
              />
            </a-steps>
            <!-- <a-steps :current="currentindex" labelPlacement="vertical">
              <a-step title="description" style="display:none" />
              <a-step
                :title="pnodes[2].status|statusfilter"
                :description="pnodes[2].name"
                @mouseover="hovertips(pnodes[2].ptips,2)"
                @mouseout="hovertipsOut()"
              />
              <a-step
                :title="pnodes[3].status|statusfilter"
                :description="pnodes[3].name"
                @mouseover="hovertips(pnodes[3].ptips,3)"
                @mouseout="hovertipsOut()"
              />
              <a-step
                :title="pnodes[4].status|statusfilter"
                :description="pnodes[4].name"
                @mouseover="hovertips(pnodes[4].ptips,4)"
                @mouseout="hovertipsOut()"
              />
              <a-step
                :title="pnodes[5].status|statusfilter"
                :description="pnodes[5].name"
                @mouseover="hovertips(pnodes[5].ptips,5)"
                @mouseout="hovertipsOut()"
              />
              <a-step
                :title="pnodes[6].status|statusfilter"
                :description="pnodes[6].name"
                @mouseover="hovertips(pnodes[6].ptips,6)"
                @mouseout="hovertipsOut()"
              />
              <a-step
                :title="pnodes[7].status|statusfilter"
                :description="pnodes[7].name"
                @mouseover="hovertips(pnodes[7].ptips,7)"
                @mouseout="hovertipsOut()"
              />
            </a-steps>-->
            <div class="borderHaz"></div>
          </div>
        </a-col>
        <!-- 悬浮弹窗 -->
        <div
          class="titps"
          v-if="clickt&&tipsContent&&tipsContent.length!=0"
          :tipsContent="tipsContent"
          :style="{ left: `${left}px`,bottom: `${bottom}px`,}"
        >
          <p>
            {{tipsContent[0].key}}
            <i>{{tipsContent[0].value}}</i>
          </p>
          <p>
            {{tipsContent[1].key}}
            <i>{{tipsContent[1].value}}</i>
          </p>
        </div>
        <div
          class="titps"
          v-else-if="clickt"
          :tipsContent="tipsContent"
          :style="{ left: `${left}px`,bottom: `${bottom}px`,}"
        >
          <h3 style="text-align: center;margin-top: 10px;">暂无信息</h3>
        </div>
        <!--  -->
      </a-row>
    </a-card>

    <a-card :bordered="false" style="margin-top:10px">
      <div style="margin-bottom: 16px">
        <h2 style="margin-left: 8px">进度-明细</h2>
      </div>
      <a-table
        ref="table"
        size="small"
        :scroll="{ x: true }"
        :columns="columns"
        :dataSource="loadData"
        :showAlertInfo="false"
        @onSelect="onChange"
      ></a-table>
    </a-card>
  </div>
</template>

<script>
import STable from '@/components/table/'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import AInput from 'ant-design-vue/es/input/Input'
import moment from 'moment'
import axios from 'axios'
import { getRoleList, kaProgressDetail, getAction, kaProgressView } from '@/api/manage'
export default {
  name: 'AnalysisFirst',
  components: {
    AInput,
    ATextarea,
    STable
  },
  data() {
    return {
      // showAlertInfo:false,//showAlertInfo
      left: -5,
      bottom: -5,
      buttonWidth: 70,
      clickt: false,
      visibleCreateModal: false,
      form: null,
      mdl: {},
      url: {
        getsteps: '/api/pms/kpiView'
      },
      currentindex: 0,
      tindex:-1,
      bindex:-1,
      pnodes: [],
      tipsContent: null,
      // 高级搜索 展开/关闭
      advanced: true,
      // 查询参数
      queryParam: {},
      columns: [],
      loadData: [],
      // columns: [
      //   {
      //     title: '各部门和单位（总填报数量/完成填报数量）',
      //     dataIndex: 'no',
      //     width: 150
      //   },
      //   {
      //     title: '收入',
      //     width: 100,
      //     dataIndex: 'description'
      //   },
      //   {
      //     title: '净利润',
      //     dataIndex: 'callNo',
      //     sorter: false,
      //     needTotal: true,
      //     width: 100
      //     // customRender: (text) => text + ' 次'
      //   },
      //   {
      //     title: '状态',
      //     dataIndex: 'status',
      //     width: 100,
      //     needTotal: true
      //   },
      //   {
      //     title: '净新增达成率',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '独立区健康评估按时完成率（联考）',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '独立区年度体检完成率（联考）',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '入住合同签署完整率',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: 'TK-LTC体系执行符合率',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: 'TKR体系执行符合率',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '养康客户满意度（联考）',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '康复医院门诊病历书写合格率',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '康复医院甲级病案率',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '养康净推荐值ＮＰＳ（独立区）',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '净推荐值ＮＰＳ（护理区+康复医院）',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '全景及专项计划',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '关键信息正确率',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '独立区跌倒致重伤发生率（联考）',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '主流客户占比',
      //     width: 100,
      //     dataIndex: 'status',
      //     sorter: false
      //   },
      //   {
      //     title: '院感',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '平均入住率',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '总计',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   }
      //   // {
      //   //   table: '操作',
      //   //   dataIndex: 'action',
      //   //   width: '150px',
      //   //   scopedSlots: { customRender: 'action' },
      //   // }
      // ],
      // 加载数据方法 必须为 Promise 对象
      // loadData: parameter => {
      //   return kaProgressDetail(`${window._CONFIG['domianURL']}`).then(res => {
      //     if (res.code == 200) {
      //       debugger
      //       // this.columns = res.result.items
      //       return res.result.values
      //     }
      //   })
      // },
      selectedRows: []
    }
  },
  created() {
    // getRoleList({ t: new Date() })
    // getAction(this.url.getsteps).then(res => {
    //   //获取接口数据
    //   this.pnodes = res.data
    // })
    // 进度-概览
    kaProgressView(`${window._CONFIG['domianURL']}`).then(res => {
      if (res.code == 200) {
        this.pnodes = res.result.pnodes
      }
    })
    kaProgressDetail(`${window._CONFIG['domianURL']}`).then(res => {
      if (res.code == 200) {
        this.columns = res.result.items.map(function(item) {
          return {
            title: item.name,
            dataIndex: item.code,
            key:item.code,
          }
        })
        this.loadData = res.result.values
      }
    })
  },
  filters: {
    statusfilter: function(value) {
      switch (value) {
        case 'ongoing':
          return '进行中'
          break
        case 'finished':
          return '已完成'
          break
        case 'waiting':
          return '待进行'
          break
        default:
          return ''
          break
      }
    }
  },
  methods: {
    hovertips(val, boll,index) {
      this.clickt = true
      this.tipsContent = val
      let antleft=document.getElementsByClassName('antLeft')[0].offsetWidth
      this.left=(document.getElementsByClassName('ant-col-19')[0].offsetWidth-index*14)/(index-3)
      // this.left=(document.getElementsByClassName('ant-card')[0].offsetWidth- antleft)/(index-2)-6
      if(index&&index-1==boll){
          // this.left = document.getElementsByClassName('ant-card')[0].offsetWidth-this.left
          // this.bottom = 47
          // document.styleSheets[0].addRule('.titps::before','border-right-color: transparent !important;');
          // return false
      }else{
          // document.styleSheets[0].addRule('.titps::before','border-right-color: #f1f8ff !important;');
      }
      this.bottom = -5
      switch (boll) {
        case 0:
          this.left = -5
          this.bottom = 100
          break
        case 1:
          this.left = -5
          this.bottom = -5
          break
        case 2:
          this.left = antleft-6
          this.bottom = 47
          break
        case 3:
          this.left = this.left * (boll-2)+antleft
          this.bottom = 47
          break
        case 4:
          this.left = this.left * (boll-2)+antleft
          this.bottom = 47
          break
        case 5:
          this.left = this.left * (boll-2)+antleft
          this.bottom = 47
          break
        case 6:
          this.left = this.left * (boll-2)+antleft
          this.bottom = 47
          break
        case 7:
          this.left = this.left * (boll-2)+antleft
          this.bottom = 47
          break
        case 8:
          this.left = this.left * (boll-2)+antleft
          this.bottom = 47
          break
        case 9:
          this.left = this.left * (boll-2)+antleft
          this.bottom = 47
          break
        case 10:
          this.left = this.left * (boll-2)+antleft
          this.bottom = 47
           break
        case 11:
          this.left = this.left * (boll-2)+antleft
          this.bottom = 47
           break
        case 12:
          this.left = this.left * (boll-2)+antleft
          this.bottom = 47
          break
        default:
          break
      }
    },
    hovertipsOut() {
      this.clickt = false
    },
    clickurl(url){
      if(!url||url==""){
        this.$router.push({path: '/gm/GmScore',});
      }else{
        this.$router.push({path: url,});
      }
    },
    // handleCreateModalOk() {
    //   this.createForm.validateFields((err, fieldsValue) => {
    //     if (err) {
    //       return
    //     }
    //     const description = this.createForm.getFieldValue('description')
    //     axios
    //       .post('/saveRule', {
    //         desc: description
    //       })
    //       .then(res => {
    //         this.createForm.resetFields()
    //         this.visibleCreateModal = false
    //         this.loadRuleData()
    //       })
    //   })
    // },
    onChange(row) {
      // this.selectedRows = row.selectedRows
      // console.log(this.$refs.table)
    }
  },
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
    pnodes: function(params) {
      params.forEach(element => {
        if(element.pseq==1){
        if (element.status == 'ongoing') {
            this.tindex = 0
            this.bindex = 0
          }
        if(element.status=="finished"){
             this.tindex = 1
             this.bindex = 1
          }
        }else{
          if (element.status == 'ongoing') {
            this.currentindex = element.pseq - 2
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.ant-table td {
  white-space: nowrap;
}
.dib {
  display: inline-block;
}
.ant-steps /deep/ {
  .ant-steps-item-description {
    //  .ant-steps-item-title{
    position: absolute;
    top: -25px;
    left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 85px;
  }
}
.ant-steps /deep/{
  .ant-steps-item:last-child{
  .ant-steps-item-description{
  position: absolute;
    top: -25px;
    left: -15px;
    white-space: nowrap;
    overflow: inherit;
    width: 85px;
  }
}
}
.borderVer {
  width: 1px;
  height: 60%;
  background-color: #e8e8e8;
  display: inline-block;
  position: absolute;
  top: 16px;
  right: 77px;
}
.borderHaz {
width: 11%;
    height: 1px;
    background-color: #e8e8e8;
    display: inline-block;
    position: absolute;
    top: 17px;
    left: -78px;
}
.titps {
  width: 180px;
  height: 70px;
  position: absolute;
  color: #fff;
  background-color: #0e0e0ecc;
  // bottom: -20px;
  // right: -15px;
  //   bottom: 3px;
  // left: 140px;
  border-radius: 8px;
  padding: 5px;
}
.titps::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 75px;
    top: -20px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #0e0e0ecc;
    position: absolute;
}
.ant-steps-item-icon :hover {
  .titps {
    display: none;
  }
}
.ant-table-wrapper /deep/{
.ant-table-body {
  th{
    min-width: 60px
  }
}
}
.ant-table-wrapper /deep/{
.ant-table-body {
  th:first-child{
    min-width: 90px
  }
}
.ant-table-row{
  height: 60px;
}
}
.ant-row-flex /deep/{
.ant-steps-item-icon{
  cursor: pointer
}
.ant-steps-item-icon:hover{
  background-color: #d5e8fb
}
}
.ant-card-body{
  background-color: aqua
}

h3{
  color: #fff
}
</style>
